<template>
  <view class="fm-quantity">
    <fm-button
      @click="handleChange('minus')"
      mode="icon-button"
      type="default"
      icon="icon-minus-circle-outline"
      icon-color="#878d99"
      icon-size="24px"
      size="s"
      :disabled="_isMinusDisabled"
      :hidden="_value <= min"
    >
    </fm-button>
    <view
      class="fm-quantity__number"
      :hidden="_value <= min"
    >
      {{ _value }}
    </view>
    <fm-button
      @click="handleChange('plus')"
      mode="icon-button"
      type="primary"
      icon="icon-plus-circle"
      icon-color="inherit"
      icon-size="24px"
      size="s"
      :disabled="_isMaxDisabled"
    >
    </fm-button>
  </view>
</template>

<script>
import FmIcon from '@/components/FmIcon'
import FmButton from '@/components/FmButton'
export default {
  name: 'FmQuantity',
  components: {
    FmIcon,
    FmButton
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: Number,
    max: Number,
    min: {
      type: Number,
      default: 0
    },
    disabled: Boolean
  },
  data () {
    return {}
  },
  computed: {
    _isMinusDisabled () {
      const min = +this.min
      const value = +this.value
      return min === value || this.disabled
    },
    _isMaxDisabled () {
      const max = +this.max
      const value = +this.value
      return max === value || this.disabled
    },
    _value: {
      get () {
        return this.correctValue(this.value)
      },
      set (val) {
        this.$emit('change', val)
      }
    }
  },
  methods: {
    // 纠正value值
    correctValue (val) {
      const _val = parseInt(val)
      const noVal = Number.isNaN(_val)
      let value
      if (noVal) {
        value = this.min
        this.$emit('change', _val)
      } else if (_val < this.min) {
        value = this.min
        this.$emit('change', _val)
      } else if (_val > this.max) {
        value = this.max
        this.$emit('change', _val)
      } else {
        value = _val
      }
      return value
    },
    handleChange (type) {
      const _value = this._value
      const _isMaxDisabled = this._isMaxDisabled
      const _isMinusDisabled = this._isMinusDisabled
      switch (type) {
        case 'plus':
          if (!_isMaxDisabled) {
            this._value = _value + 1
          } else {
            this.$emit('overlimit', type)
          }
          break
        case 'minus':
          if (!_isMinusDisabled) {
            this._value = _value - 1
          } else {
            this.$emit('overlimit', type)
          }
          break
      }
    }
  },
  created () {},
  mounted () {
  }
}
</script>

<style lang="less">
@import "../asset/style/_variable.less";

.fm-quantity {
  flex: none;
  display: inline-flex;
  align-items: center;
}

.fm-quantity__number {
  display: inline-flex;
  // text-align: center;
  justify-content: center;
  min-width: 2em;
  font-size: @--font-size-base;
  font-family: @--font-family-number;
  color: inherit;
}
</style>
